<template>
    <div class="box">
        <van-nav-bar
        title="排行榜"
        left-arrow
        @click-left="onClickLeft"/>
        <div class="headbox">
            <div class="aweek">
                <h3>一周榜单|TOP3</h3>
                <span>11.04-11.10</span>
            </div>
            <div>
                <ul>
                    <li><span class="index">1</span>我在精神病院学斩神</li>
                    <li><span class="index">2</span>神印王座</li>
                    <li><span class="index">3</span>犯罪心理学</li>
                </ul>
            </div>
        </div>
        <div class="tag">
            <van-tabs v-model="active" color="#ff9999" sticky>
                <van-tab title="男生">
                    <book-item2 v-for="item in books" :key="item.id" :books="item"></book-item2>
                </van-tab>
                <van-tab title="女生">
                    <book-item2 v-for="item in books" :key="item.id" :books="item"></book-item2>
                </van-tab>
                <van-tab title="动漫">
                    <book-item2 v-for="item in books" :key="item.id" :books="item"></book-item2>
                </van-tab>
            </van-tabs>
        </div>
        
    </div>
</template>

<script>
import bookItem2 from '@/components/bookItem2'
import { getBooksApi } from '@/api/booksApi';
    export default {
        methods: {
            onClickLeft() {
                this.$router.push('city_boys');
            },
        },
        components: {
            bookItem2
        },
        async created() {
            this.$root.$children[0].$children[1].isShowHead = false;
            this.books =await getBooksApi();
        },
        beforeDestroy() {
            this.$root.$children[0].$children[1].isShowHead = true;
        },
        data() {
            return {
                active: 0,
                books: [],
            };
        },
    }
</script>

<style lang="scss" scoped>
.headbox{
    width: 351px;
    height: 178px;
    margin: 0 auto;
    box-shadow: 0px 0px 5px rgba(153, 153, 153, 0.349019607843137);
}
.aweek{
    background-color: #FF6666;
    width: 100%;
    height: 76px;
    position: relative;
    h3{
        color: white;
        font-size: 18px;
        position: absolute;
        top: 50%;
        left: 3%;
        translate: 0 -50%;
    }
    span{
        color: white;
        font-size: 12px;
        position: absolute;
        top: 65%;
        left: 3%;
    }
}
li{
    margin: 8px;
    color: #999;
    font-size: 13px;
}
.index{
    color: #FF6666;
    margin-right: 8px;
}
.tag{
    width: 50%;
    height: 40px;
    margin-top: 15px;
}

</style>